import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import { AtTabs, AtTabsPane } from 'taro-ui';
import './index.scss';

interface IProps {
  children: any;
  current: number;
  tabList: {
    title: string;
    value: number;
  }[];
  onChange?: (value: number) => void;
}

/**
 * 提交订单
 * @returns
 */
const Tabs = ({ children, current, tabList, onChange }: IProps) => {
  const [_current, setCurrent] = useState(current);

  const _onChange = (value: number) => {
    onChange && onChange(value);
  };

  useEffect(() => {
    setCurrent(current);
  }, [current]);
  return (
    <View className="tabs-component">
      <AtTabs current={_current} tabList={tabList} onClick={_onChange}>
        {tabList.map((_, key) => {
          return (
            <AtTabsPane key={key} current={_current} index={key}>
              {children}
            </AtTabsPane>
          );
        })}
      </AtTabs>
    </View>
  );
};
export default Tabs;
